<template>
  <div>
    <el-form :model="basicInfo" :rules="rules" ref="basicInfo" label-width="100px">
      <div class="detail-info" style="margin-top: 50px">
        <div class="form-item">
          <h4>新增动作跳转</h4>
          <el-form-item label="所属系统" required prop="system">
            <!-- <el-radio-group v-model="basicInfo.system" @change="systemChange">
              <el-radio label="1">订货系统</el-radio>
              <el-radio label="2">款台系统</el-radio>
              <el-radio label="3">业代行程</el-radio>
              <el-radio label="4">惠民物流</el-radio>
            </el-radio-group> -->
            <el-checkbox-group v-model="basicInfo.system" @change="systemChange">
              <el-checkbox v-for="(item, index) in systemGroup" :label="item.id" :key="index">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="所属设备" required prop="equipment">
            <!-- <el-radio-group v-model="basicInfo.equipment" @change="getMarkId">
              <el-radio v-if="basicInfo.system === '1'" label="1">PC</el-radio>
              <el-radio v-if="basicInfo.system === '1'" label="2">惠付通</el-radio>
              <el-radio v-if="basicInfo.system === '1'" label="3">惠配通</el-radio>
              <el-radio v-if="basicInfo.system === '2'" label="4">惠付通-款台</el-radio>
            </el-radio-group> -->
            <el-checkbox-group v-model="basicInfo.equipment">
              <el-checkbox v-for="(item, index) in equipmentGroup" :label="item.id" :key="index">{{item.name}}</el-checkbox>
              <!-- <el-checkbox label="1">PC</el-checkbox>
              <el-checkbox label="2">惠付通</el-checkbox>
              <el-checkbox label="3">惠配通</el-checkbox>
              <el-checkbox label="4">惠付通-款台</el-checkbox> -->
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="动作标识" required >
            <el-input v-model="basicInfo.markId" :disabled="true" placeholder="动作标识ID" style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label="动作名称" prop="name">
            <el-input v-model="basicInfo.name" placeholder="动作名称" style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label="动作说明">
            <el-input v-model="basicInfo.memo" placeholder="动作说明" style="width:220px"></el-input>
          </el-form-item>
        </div>
      </div>
      <div style="margin: 20px auto 20px; width: 20%">
        <el-button @click="onSubmit('basicInfo')" type="success">提交</el-button>
        <el-button @click="cancel(menuId, 1)" type="danger">取消</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
  import { gggl } from '../../../config/proxy.js'
  export default {
    data () {
      return {
        basicInfo: {
          system: ['1'], // 所属系统
          equipment: ['1', '2', '3'], // 所属设备
          markId: '', // 动作标识
          name: '', // 动作名称
          memo: '', // 动作说明
          type: 1
        },
        detailGroup: '',
        systemGroup: [
          {name: '订货系统', id: '1'},
          {name: '款台系统', id: '2'},
          {name: '业代行程', id: '3'},
          {name: '惠民物流', id: '4'}
        ],
        equipmentGroup: [
          {name: 'PC', id: '1'},
          {name: '惠付通', id: '2'},
          {name: '惠配通', id: '3'}
        ],
        dhGroup: [
          {name: 'PC', id: '1'},
          {name: '惠付通', id: '2'},
          {name: '惠配通', id: '3'}
        ], // 订货数组
        ktGroup: [
          {name: '惠付通-款台', id: '4'}
        ], // 款台数组
        isCreateOrUpdate: '',
        menuId: '',
        text: '',
        rules: {
          system: [
            { type: 'array', required: true, message: '至少选择一个系统', trigger: 'change' }
          ],
          equipment: [
            { type: 'array', required: true, message: '至少选择一个设备', trigger: 'change' }
          ],
          name: [
            { required: true, message: '请输入动作跳转名称', trigger: 'blur, change' }
          ]
        }
      }
    },
    methods: {
      systemChange (val) {
        console.log(val)
        if (val.length === 0) {
          this.equipmentGroup = []
        } else {
          this.equipmentGroup = []
          if (val.indexOf('1') !== -1) {
            console.log(1)
            this.equipmentGroup = this.deleteRepeat(this.equipmentGroup.concat(this.dhGroup))
            console.log(this.equipmentGroup)
          }
          if (val.indexOf('2') !== -1) {
            console.log(2)
            this.equipmentGroup = this.deleteRepeat(this.equipmentGroup.concat(this.ktGroup))
          }
          if (val.indexOf('3') !== -1) {
            console.log(3)
          }
          if (val.indexOf('4') !== -1) {
            console.log(4)
          }
        }
      },
      deleteRepeat (arr) { // json 去重
        for (var i = 0; i < arr.length - 1; i++) {
          var old = arr[i]
          for (var j = i + 1; j < arr.length; j++) {
            if (old.name === arr[j].name && old.id === arr[j].id) {
              arr.splice(j, 1)
              j--
            }
          }
        }
        console.log(arr)
        return arr
      },
      searchDetail (row) { // 查询详情
        // console.log(row)
        gggl.dztzgl.detail({id: row.id}, (res) => {
          console.log(res)
          if (res.message === 'ok') {
            this.detailGroup = res.content
            this.basicInfo.system = this.detailGroup.system
            this.systemChange(this.basicInfo.system)
            // })
            this.basicInfo.equipment = this.detailGroup.equipment
            this.basicInfo.markId = this.detailGroup.markId.toString()
            this.basicInfo.name = this.detailGroup.name
            this.basicInfo.memo = this.detailGroup.memo
          } else {
            this.message('查看详情失败', 'error')
          }
        })
      },
      getMarkId (val) { // 获取动作标识
        gggl.dztzgl.getMarkId('', (res) => {
          if (res.message === 'ok') {
            this.basicInfo.markId = res.content
          } else {
            this.message('查询动作标识失败', 'error')
          }
        })
      },
      onSubmit (formName) { // 创建或更新
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var _data = this.basicInfo
            _data.createUser = this.isCreateOrUpdate === 'create' ? this.userName : this.detailGroup.createUser
            _data.updateUser = this.isCreateOrUpdate === 'update' ? this.userName : ''
            _data.id = this.isCreateOrUpdate === 'update' ? this.detailGroup.id : ''
            console.log(_data)
            gggl.dztzgl[this.isCreateOrUpdate](_data, (res) => {
              console.log(res)
              if (res.message === 'ok') {
                this.cancel(this.menuId)
                this.message(this.text + '成功', 'success')
                this.$store.dispatch('dztzState', this.$store.state.updateState.dztzState + 1)
              } else {
                this.message(this.text + '失败', 'error')
              }
            })
          }
        })
      },
      cancel (id, num) { // 取消
        if (num) {
          this.$confirm('确定要取消？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$store.dispatch('delTab', {id: id})
          }).catch(() => {
          })
        } else {
          this.$store.dispatch('delTab', {id: id})
        }
      },
      message (text, type) { // 消息提示
        this.$message({
          showClose: true,
          message: text,
          type: type
        })
      }
    },
    computed: {
      update_state: function () {
        // console.log(state.updateState.dhmState)
        return this.$store.state.updateState.zcfqState
      },
      userName: function () {
        if (!this.$store.state.user.info.user_name) {
          this.$store.dispatch('SET_TOKEN')
        }
        return this.$store.state.user.info.user_name
      },
      userId: function () {
        return this.$store.state.user.info.roleid
      },
      branchName: function () {
        return this.$store.state.user.info.branchId === 1 ? '总公司' : this.$store.state.user.info.branchName
      },
      branchId: function () {
        return this.$store.state.user.info.branchId
      },
      deptName: function () {
        return this.$store.state.user.info.parOrgName
      },
      deptId: function () {
        return this.$store.state.user.info.or_org_id
      }
    },
    created () {
      this.menuId = this.$store.state.tab.menuId
      if (this.$store.state.tab.uid) {
        console.log(this.$store.state.tab)
        this.isCreateOrUpdate = 'update'
        this.text = '编辑'
        this.searchDetail(this.$store.state.tab.uid)
      } else {
        this.getMarkId()
        this.isCreateOrUpdate = 'create'
        this.text = '新增'
      }
      console.log(this.text)
    }
  }
</script>

